<!--
 * @Description: 注册
 * @Author: zhao
 * @Date: 2022-06-29 09:43:22
 * @LastEditors: zhao
 * @LastEditTime: 2022-07-07 17:07:24
-->
<!--  -->
<template>
    <div class="Register">
        <div class="Register_top">
            <h1 @click="$router.push('/home')" class="cursor">{{ setting.title }}</h1>
            <span>欢迎注册</span>
        </div>

        <div class="Register_content">
            <div class="user_info">用户注册</div>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="账号名称：" prop="userName">
                    <el-col :span="8" class="input">
                        <el-input v-model="ruleForm.userName" placeholder="请输入账号名称"></el-input>
                    </el-col>
                    <el-col :span="15" class="Alert">
                        <div class="zhushi">
                            <i class="el-icon-warning" style="font-size: 20px; color: #bbb"></i>
                            <a href="javascript:void(0)" class="ellipsis" title="6-15个字符,可使用字母、数字、下划线。需以字母开头(账号区分大小写)">
                                6-15个字符,可使用字母、数字、下划线。需以字母开头(账号区分大小写)
                            </a>
                        </div>
                    </el-col>
                </el-form-item>
                <el-form-item label="账号密码：" prop="password">
                    <el-col :span="8" class="input">
                        <el-input v-model="ruleForm.password" show-password placeholder="请输入密码"></el-input>
                    </el-col>
                    <el-col :span="15" class="Alert">
                        <div class="zhushi">
                            <i class="el-icon-warning" style="font-size: 20px; color: #bbb"></i>
                            <a href="javascript:void(0)" class="ellipsis" title="密码长度为8之28个字符"> 密码长度为8之28个字符 </a>
                        </div>
                    </el-col>
                </el-form-item>
                <el-form-item label="确认密码：" prop="checkPassword">
                    <el-col :span="8" class="input">
                        <el-input v-model="ruleForm.checkPassword" show-password placeholder="请再次输入密码"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="手机号：" prop="phone">
                    <el-col :span="8" class="input">
                        <el-input v-model="ruleForm.phone" placeholder="请输入手机号"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="验证码：" prop="code">
                    <el-col :span="4" class="input" style="min-width: 110px">
                        <el-input v-model="ruleForm.code" placeholder="请输入验证码"></el-input>
                    </el-col>
                    <el-col :span="2" style="padding-left: 20px">
                        <el-button class="codeButtonName" size="small" :disabled="disabled" @click="validateFieldCode">
                            {{ codeButtonName }}</el-button
                        >
                    </el-col>
                </el-form-item>

                <el-form-item label="姓名：" prop="realName">
                    <el-col :span="8" class="input">
                        <el-input v-model="ruleForm.realName" placeholder="请输入姓名"></el-input>
                    </el-col>
                    <el-col :span="15" class="Alert" style="line-height: 16px">
                        <div class="zhushi">
                            <i class="el-icon-warning" style="font-size: 20px; color: #bbb"></i>

                            <a
                                href="javascript:void(0)"
                                class="ellipsis"
                                title="资料借阅实行实名制,请务必与本人身份证姓名保持一致,否则将无法提供地质资料加工服务"
                            >
                                资料借阅实行实名制,请务必与本人身份证姓名保持一致,否则将无法提供地质资料加工服务
                            </a>
                        </div>
                    </el-col>
                </el-form-item>
                <el-form-item label="工作单位：" prop="workCompany">
                    <el-col :span="8" class="input">
                        <el-input v-model="ruleForm.workCompany" placeholder="请输入工作单位"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="邮箱：" prop="mail">
                    <el-col :span="8" class="input">
                        <el-input v-model="ruleForm.mail" placeholder="请输入邮箱"></el-input>
                    </el-col>
                </el-form-item>

                <p style="padding-left: 100px; color: red">注：必须本人前去资料馆领取下单资料</p>

                <el-form-item>
                    <el-button class="registerButton" type="primary" @click="submitForm('ruleForm')">立即注册</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import setting from "@/settings"
import rules from "@/utils/rules"
export default {
    name: "",
    data() {
        let checkPasswords = (rule, value, callback) => {
            if (value == "") {
                callback(new Error("请再次输入密码"))
            } else if (value !== this.ruleForm.password) {
                callback(new Error("两次输入密码不一致!"))
            } else {
                callback()
            }
        }
        //验证码
        let ruleCode = (rule, value, callback) => {
            if (!value) {
                callback(new Error("请输入验证码"))
            } else if (!this.ruleForm.phone) {
                callback(new Error("请输入手机号"))
            } else {
                callback()
            }
        }
        return {
            setting: setting,
            ruleForm: {
                // userName: 'q1654157283',
                // password: '1654157283@qq.com',
                // checkPassword: "1654157283@qq.com", //确认密码
            },
            rules: {
                ...rules,
                checkPassword: [{ validator: checkPasswords, trigger: "blur", required: true }],
                code: [{ validator: ruleCode, trigger: "blur", required: true }],
            },
            codeButtonName: "获取验证码",
            disabled: false,
        }
    },

    components: {},

    computed: {},

    mounted() {
        this.openPromise()
    },

    methods: {
        submitForm() {
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    this.openConfirm()
                } else {
                    return false
                }
            })
        },
        resetForm(val) {
            this.$refs[val].resetFields()
        },
        getCode() {
            if (this.codeButtonName == "获取验证码") {
                let second = 60
                let name = second + "秒后重新获取"
                this.codeButtonName = name
                this.disabled = true
                second--
                let timestamp = setInterval(() => {
                    if (second <= 0) {
                        clearInterval(timestamp)
                        this.codeButtonName = "获取验证码"
                        this.disabled = false
                    } else {
                        let name = second + "秒后重新获取"
                        second--
                        this.codeButtonName = name
                    }
                }, 1000)
            }
        },
        //验证码
        validateFieldCode() {
            this.$refs.ruleForm.validateField("phone", (verifycode_check) => {
                if (verifycode_check) return
                this.getCode()
                this.$store.dispatch("user/getRegisteredCode", { phone: this.ruleForm.phone }).then((res) => {
                    if (res.code == 200) this.$message.success(res.msg || "发送成功")
                    if (res.code != 200) this.$message.error(res.msg || "发送失败")
                })
                // this.$refs.ruleForm.validateField("code", (user_mobile_check) => {
                //     if (user_mobile_check) return
                // })
            })
        },
        openPromise() {
            const h = this.$createElement
            this.$msgbox({
                title: "用户须知",
                message: h("p", null, [h("span", { style: "color: red" }, "我承诺，所填注册信息真实可信。 ")]),
                showCancelButton: true,
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                beforeClose: (action, instance, done) => {
                    if (action === "confirm") {
                        done()
                    } else {
                        this.$router.push("/home")
                        done()
                    }
                },
            }).then((action) => {})
        },
        openConfirm() {
            const h = this.$createElement
            this.$msgbox({
                title: "提示",
                message: h("p", null, [h("span", { style: "color: red" }, "请确认您的信息全部如实并正确填写。")]),
                showCancelButton: true,
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                beforeClose: (action, instance, done) => {
                    if (action === "confirm") {
                        done()
                        const data = { ...this.ruleForm }
                        delete data.checkPassword
                        this.$store.dispatch("user/Registered", data).then((res) => {
                            if (res.code === 200) {
                                this.$message({
                                    message: res.msg || "注册成功",
                                    type: "success",
                                })
                                this.$router.push("/login")
                            }
                        })
                    } else {
                        done()
                    }
                },
            }).then((action) => {})
        },
    },
}
</script>
<style lang='scss' scoped>
.Register {
    background: white;
    height: 100%;

    .Register_top {
        padding: var(--main-padding);
        display: flex;
        justify-content: flex-start;
        align-items: center;
        border-bottom: 1px solid #0076a8;

        span {
            text-decoration: none;
            color: #0076a8;
            font-size: 0.37rem;
            font-family: "微软雅黑";
            padding: 0 30px;
        }
    }

    .Register_content {
        padding: var(--main-padding);

        margin: 20px 0;

        .el-form {
            padding: 20px;
            margin: 0px auto;
            width: 80%;

            .el-col-1 {
                width: 2%;
                text-align: right;
            }

            i {
                // padding: 0 10px;
            }

            .Alert {
                color: #bbb;
                word-break: break-word; //文本超出 自动换行

                // display: flex;
                p {
                    font-size: 12px;
                    margin: 0;
                }
            }

            ::v-deep .el-input__inner {
                border: 1px solid #cccccc !important;
            }

            ::v-deep .el-form-item__content {
                display: flex;
                align-items: center;
            }

            // .code {
            //     display: flex;
            //     justify-content: flex-start;
            // }
        }

        .user_info {
            border-left: 0.083333rem solid #1eb08b;
            font-size: 0.37rem;
            border-bottom: 1px solid#ccc;
            padding: 10px;
        }
    }

    .registerButton {
        background: #0076a8;
        color: #fff;
    }

    .codeButtonName {
        &:hover {
            background: #0076a8;
            color: #fff;
        }
    }

    .zhushi {
        padding-left: 10px;
        display: flex;
        align-items: center;
        position: absolute;
        top: 0;
    }

    .input {
        min-width: 200px;
    }
}
</style>